<template>
	<view class="edit-page">
		<van-address-edit :area-list="areaList"  show-set-default show-search-result
			:search-result="searchResult" :area-columns-placeholder="['请选择', '请选择', '请选择']" 
			@save="onSave" @delete="onDelete" @change-detail="onChangeDetail" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		showToast
	} from 'vant';
	import {
		areaList
	} from '@vant/area-data';
	import {
		useStore
	} from 'vuex'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import api from './../../lib/request.js'
	let list = ref(['请选择', '请选择', '请选择'])
	// 搜索结果
	const searchResult = ref([]);
	const store = useStore()
	let id = ref(store.state.uid)

	let AddressInfo = ref({})
	let addr = ref({})
	// 保存
	const onSave = (val) => {
		console.log(val);
		const data = {
			userId: id.value,
			name: val.name,
			province: val.province,
			city: val.city,
			area: val.areaCode,
			detailedAddress: val.addressDetail,
			iphone: val.tel
		};
		api.post('/address/add', data).then(res => {
			let {data} = res
			let list = []
			for(let k of data){
				let a = { id: k.id,name:k.name,
				tel:k.iphone,address:`${k.province}${k.city}${k.area}${k.detailedAddress}`}
				list.push(a)
			}
			store.commit('update_addlist',list)
			showToast('已新增地址')
			if (res.code) {
				setTimeout(()=>{
					uni.navigateBack({
						url:'/pages/addr/addr'
					})
				},1500)
			}
		})
		
}

	// 修改详细地址时触发	
	const onChangeDetail = (val) => {
		console.log(val);
	}
</script>

<style>

</style>